<template>
	<view>
		<view class="card patient" v-if="list.length>0">
			<view class="change_patient">
				<text @click="show">切换</text>
			</view>
			<view class="patient_info">
				<view class="info_avatar">
					<image :src="display.avatar || display.patientAvatar || 'https://admin.yuanfenjihua.com/admin-api/infra/file/0/get/7d485f174dd88232f08d5d0ea6d05b153a3857402e3ce776d2c1eca015cad0cb.png'" mode="aspectFill"></image>
				</view>
				<view class="info_text">
					<view class="text">
						<view class="text_name">
							{{display.name || ''}}
						</view>
						<view>
							{{$IdCard(display.idCard || '',3) || ''}}岁
						</view>
						<view>
							{{display.sex==1?'男':'女' || '男'}}
						</view>
					</view>
					<view class="date">
						<view>
							{{display.idCard || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :showClose="true" borderRadius="10px 10px 0 0">
			<view class="container">
				<uni-icons class="close_icon" type="closeempty" size="24" color="#999" @click="close"></uni-icons>
				<view class="patient_list">
					<view class="card patient_item" v-for="item in list" :key="item.id" @click="getDisplayInfo(item)">
						<view class="patient_item_info">
							<view class="item_avatar">
								<image :src="item.avatar" mode="scaleToFill"></image>
							</view>
							<view class="item_info">
								<view class="info_name">
									<view class="name">
										{{item.name || ''}}
									</view>
									<view class="tips blue">
										已实名
									</view>
								</view>
								<view class="info_other">
									<view>
										{{item.sex==1?"男":"女" || '男'}}
									</view>
									<view>
										{{$IdCard(item&&item.idCard,3) || 0}}岁
									</view>
									<view>
										{{item.idCard || 0}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		queryPatientInfoList
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'
	export default {
		name: "patient",
		data() {
			return {
				display: {},
				list: []
			};
		},
		created() {
			this.queryPatientInfoList()
		},
		methods: {
			queryPatientInfoList() {
				queryPatientInfoList({
					"OpenId": getUserInfo().openId,
					"userid": getUserInfo().id
				}).then(res => {
					this.list = res.data.list
					this.display = this.list[0]
					if (this.list.length > 0) {
						this.$emit('info', {
							id: this.display.id
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getDisplayInfo(item) {
				this.display = item
				this.$emit('info', {
					id: this.display.id
				})
				this.close()
			},
			show() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.patient {
		background: linear-gradient(140deg, rgba(255, 255, 255, 1) 0%, rgba(220, 229, 255, 1) 100%);

		.change_patient {
			text-align: right;
			font-size: 22rpx;
			color: #3B6CFE;
		}

		.patient_info {
			font-size: 26rpx;
			padding-bottom: 20rpx;
			color: #333333;
			display: flex;
			align-items: center;

			.info_avatar {
				width: 90rpx;
				height: 90rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info_text {
				.text {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					&>view {
						margin-right: 20rpx;
					}

					.text_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
				}
			}
		}
	}

	.container {
		position: relative;
		padding: 20rpx;
		height: 65vh;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;


		.close_icon {
			position: absolute;
			right: 20rpx;
			top: 40rpx;
			transform: translate(-50%, -50%);
		}

		.patient_list {
			margin-top: 60rpx;
			height: calc(100% - 60rpx);
			overflow-x: hidden;
			overflow-y: auto;

			.patient_item {
				position: relative;
				padding: 40rpx 20px;
				background-color: #F3F8FF;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.patient_item_info {
					display: flex;
					align-items: center;

					.item_avatar {
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item_info {
						margin-left: 20rpx;
						font-size: 22rpx;
						color: #999999;

						.info_name,
						.info_other {
							display: flex;
							align-items: center;

							&>view {
								margin-right: 10rpx;

								&:last-child {
									margin: 0;
								}
							}
						}

						.info_name {
							margin-bottom: 20rpx;

							.name {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
							}

							.tips {
								padding: 6rpx 10rpx;
								border-radius: 10rpx;
								font-size: 22rpx;
								margin-left: 20rpx;

								&.blue {
									color: #3B6CFE;
									background-color: #F3F8FF;
								}

								&.gray {
									color: #999;
									background-color: #f5f5f5;
								}
							}
						}
					}
				}
			}
		}
	}
</style>